<template>
	<view class="container">
		<u-navbar :title="$t('my.income_record')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>

		<view class="content">
			<view class="inc-sidebar">
				<view class="tabs" v-for="(item,index) in tabList" :key="index" @click="content = index"
					:class="{'active': index === content}">
					{{item}}
				</view>
			</view>

			<view v-for="item in orderList" :key="item" class="revenue-list">
				<view class="betweenX mar-bottom-40">
					<view class="flex flex-direction">
						<text class="font-26 color_929292">{{$t('home.money')}}</text>
						<text class="font-24 color_01b176">{{item.change_amount}}</text>
					</view>
					<text class="font-28">{{$t('my.making_orders')}}</text>
				</view>
				<view class="flex flex-direction">
					<text class="font-26 color_929292">{{$t('my.time')}}</text>
					<text class="font-24">{{formatTimestamp(item.created_at * 1000)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		useI18n
	} from "vue-i18n"
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		balanceLogPageList
	} from '@/api/user'
	import {
		formatTimestamp
	} from '@/util/commonFunction'

	const {
		t
	} = useI18n()

	const content = ref(0)
	const tabList = ref([t('my.making_orders')]) // ,'團隊返傭', '本金返還'
	const orderList = ref([]); // 存储列表数据
	const next_page_url = ref(true); // 用于判断是否存在下一页
	const formData = ref({
		page: 1,
		ps: 10,
		scene: 4
	});

	// 加载更多数据
	const loadMore = async () => {
		if (!next_page_url.value) return;
		formData.value.page += 1;
		fetchData().then((res) => {
			next_page_url.value = res.next_page_url;
			orderList.value = [...orderList.value, ...res.data];
		})
	};

	// 下拉刷新数据
	const refresh = () => {
		formData.value.page = 1;
		fetchData().then((res) => {
			orderList.value = res.data;
		}).finally(() => {
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		});
	};

	const fetchData = async () => {
		return new Promise(async (resolve, reject) => {
			try {
				const res = await balanceLogPageList({
					...formData.value
				})
				resolve(res.data);
			} catch (error) {
				reject(error)
			}
		});
	};

	// 监听页面滚动到底部事件，加载更多数据
	onReachBottom(loadMore);

	// 监听下拉刷新事件，重新加载第一页数据
	onPullDownRefresh(refresh);

	onShow(() => {
		refresh();
	});
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;

		.content {
			position: relative;
			padding-top: 35rpx;
			padding-right: 2.4155vw;
			padding-left: 25.1208vw;
			height: 100%;
			box-sizing: border-box;
		}

		.inc-sidebar {
			position: absolute;
			left: 0;
			top: 0;
			width: 22.9469vw;
			height: calc(100vh - 44px);
			box-shadow: 0 1.2077vw 2.4155vw rgba(59, 72, 92, .1);
			background: #fff;

			.tabs {
				padding: 1.9324vw 1.2077vw;
				box-sizing: border-box;
				height: 110rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

			.active {
				color: #edad14;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 6rpx;
					height: 4.8309vw;
					border-radius: 10rpx;
					background-color: #edad14;
				}
			}
		}

		.revenue-list {
			line-height: 1.5;
			padding: 4.8309vw 3.8647vw;
			border-radius: 1.9324vw;
			background: #fff;
			margin-bottom: 2.8986vw;
			box-sizing: border-box;
		}
	}
</style>